import { ref, reactive } from 'vue';
import { formatPercent } from '@/utils';
import dayjs from 'dayjs';
// 设备
export const deviceOptions: any[] = [
  {
    label: '不限',
    value: '0'
  },
  {
    label: 'PC',
    value: '1'
  },
  {
    label: '安卓',
    value: '2'
  },
  {
    label: 'IOS',
    value: '3'
  },
  {
    label: '小程序',
    value: '4'
  }
];
// 渠道
export const channelOptions: any[] = [
  {
    label: '不限',
    value: '0'
  },
  {
    label: '对公',
    value: '1'
  },
  {
    label: '自然注册',
    value: '2'
  },
  {
    label: '讲师',
    value: '3'
  },
  {
    label: '代理',
    value: '4'
  },
  {
    label: '销售',
    value: '5'
  },
  {
    label: '百度',
    value: '6'
  },
  {
    label: '360',
    value: '7'
  }
];
export const channelCheckOptions: any[] = reactive([{
  label: '销售额',
  value: '1',
  row: {
    icon: 'sale',
    name: '销售额',
    count: '89,274.31',
    ratio: '+6.12%',
    ratioType: 'up'
  }
},
{
  label: '订单数',
  value: '2',
  row: {
    icon: 'order',
    name: '订单数',
    count: 56,
    ratio: '-6.12%',
    ratioType: 'down'
  }
},
{
  label: '客单价',
  value: '3',
  row: {
    icon: 'customer',
    name: '客单价',
    count: 56,
    ratio: '-6.12%',
    ratioType: 'down'
  }
}, {
  label: '续费率',
  value: '4',
  row: {
    icon: 'renewal',
    name: '续费率',
    count: 56,
    ratio: '+6.12%'
  }
}]);
// 流量
export const flowOptions: any[] = reactive([{
  label: '访客数（UV）',
  value: '1',
  row: {
    icon: 'visitor',
    name: '访客数（UV）',
    count: '89,274.31',
    ratio: '+6.12%',
    ratioType: 'up'
  }
},
{
  label: 'IP数',
  value: '2',
  row: {
    icon: 'ip',
    name: 'IP数',
    count: 56,
    ratio: '-6.12%',
    ratioType: 'down'
  }
}, {
  label: '活跃用户',
  value: '4',
  row: {
    icon: 'active-user',
    name: '活跃用户',
    count: 56,
    ratio: '+6.12%'
  }
}, {
  label: '平均访问时长',
  value: '4',
  row: {
    icon: 'duration',
    name: '平均访问时长',
    count: 56,
    ratio: '+6.12%'
  }
}, {
  label: '平均访问页数',
  value: '4',
  row: {
    icon: 'visit-page',
    name: '平均访问页数',
    count: 56,
    ratio: '+6.12%'
  }
}]);
// 流量tab指标
export const flowTargetOptions:any[] = reactive([
  { label: '访客数', value: '1' },
  { label: 'IP数', value: '2' },
  { label: '活跃用户数', value: '3' }
]);
// 增长tab
export const cardTabOptions:Record<string, any>[] = reactive([
  { tabName: 'users', tabValue: 0,
    data: [{
      label: '今日新增用户', value: '9,274'
    }, { label: '历史用户数', value: '2' }]
  },
  {
    tabName: 'member', tabValue: 1,
    data: [{
      label: '今日新增会员', value: '3'
    }, { label: '历史会员数', value: '3' }] },
  { tabName: 'dropout', tabValue: 2,
    data: [{ label: '今日流失率', value: '40.11%' }] }
]);
// 用户画像
export const userLabelOptions: any[] = reactive([
  {
    label: '不限',
    value: '0'
  },
  {
    label: '新增用户',
    value: '1'
  },
  {
    label: '活跃用户',
    value: '2'
  },
  {
    label: '付费用户',
    value: '3'
  }
]);
// 地图tab
export const areaTargetOptions:any[] = reactive([
  { label: '省份', value: 1 },
  { label: '城市', value: 2 }
]);
// 进度条
export const progressData = [{
  name: '重庆',
  value: 145
},
{
  name: '上海',
  value: 45
}, {
  name: '黑龙江',
  value: 445
}, {
  name: '四川',
  value: 45
}, {
  name: '长沙',
  value: 145
}];
// 折线图表
export const lineChartXData = ref([
  dayjs('2023-07-13 00:00:00').unix(),
  dayjs('2023-07-14 06:00:00').unix(),
  dayjs('2023-07-15 12:00:00').unix(),
  dayjs('2023-07-16 18:00:00').unix()
]);
export const lineChartYData = ref([
  {
    name: '销售额',
    color: '#4975E9',
    data: [1000, 2000, 4000, 6000]
  }
]);
// 柱形
export const barChartXData = [20, 300, 11, 25];
export const barChartYData = [
  {
    name: '数量',
    color: '#4975E9',
    barWidth: 24,
    data: [0.5, 0.75, 0.11, 0.25]
  }
];
// 终端设备图例处理
export const terminalBarTooltip = (params: any) => {
  // 图例数据
  let itemStr = '';
  params.forEach((item: any) => {
    const number = formatPercent(item.value);
    const unit = '%';
    console.log(item, 'item');
    itemStr += `<div class="row">
      <div class="name">占比：</div>
      <div class="value">
        <div class="value-inner">
          <span class="unit">${unit}</span>
          <span class="number">${number.toLocaleString()}</span>
        </div>
      </div>
    </div><div class="row">
      <div class="name">${item.seriesName}：</div>
      <div class="value">
        <div class="value-inner">
          <span class="number">${item.value}</span>
        </div>
      </div>
    </div>`;
  });

  const str = `<div class="chart-tooltip line">
    ${itemStr}
  </div>`;

  return str;
};
